<template>
	<div class="detail-top-box">
		<div class="left-box">
			<div :class="tabindex=='1'?'active':''" @click="tabbtn('1')">问诊信息</div>
			<div :class="tabindex=='2'?'active':''" @click="tabbtn('2')">检查结果</div>
			<div :class="tabindex=='3'?'active':''" @click="tabbtn('3')">历史病例</div>
		</div>
		<div class="right-box">保存挂号</div>
	</div>
	<!-- 问诊信息 -->
	<div v-if="step==1">
		<div class="info-detail">
			<div class="top-title">患者信息</div>
			<el-form :model="infoform" :inline="true">
				<el-form-item label="就诊姓名" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="就诊性别" :label-width="formLabelWidth">
					<el-radio-group v-model="infoform.resource" style="width: 166px;">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机号码" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属民族" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="就诊年龄" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>
		</div>
		<div class="other-box">
			<div class="other-box-left">
				<div class="top-title">问诊信息</div>
				<div class="info-box">
					<div class="info-box-left">
						<el-form :model="infoform" :inline="true">
							<el-form-item label="预约日期" :label-width="formLabelWidth">
								<el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width: 100px;">
								</el-date-picker>
							</el-form-item>

							<el-form-item label="预约时间" :label-width="formLabelWidth">
								<el-input v-model="infoform.username" autocomplete="off"
									style="width: 100px;"></el-input>
							</el-form-item>
							<el-form-item label="测量身高" :label-width="formLabelWidth">
								<el-input v-model="infoform.username" autocomplete="off"
									style="width: 100px;"></el-input>
							</el-form-item>
							<el-form-item label="测量体重" :label-width="formLabelWidth">
								<el-input v-model="infoform.username" autocomplete="off"
									style="width: 100px;"></el-input>
							</el-form-item>

						</el-form>
					</div>
					<div class="info-box-right">
						<el-form :model="infoform" :inline="true">

							<el-form-item label="患者描述" :label-width="formLabelWidth">
								<el-input type="textarea" :rows="3" v-model="infoform.username" autocomplete="off"
									style="width: 600px;"></el-input>
							</el-form-item>
							<el-form-item label="现病史历" :label-width="formLabelWidth">
								<el-input type="textarea" :rows="3" v-model="infoform.username" autocomplete="off"
									style="width: 600px;"></el-input>
							</el-form-item>
							<el-form-item label="既往史历" :label-width="formLabelWidth">
								<el-input type="textarea" :rows="3" v-model="infoform.username" autocomplete="off"
									style="width: 600px;"></el-input>
							</el-form-item>
							<el-form-item label="检查结果" :label-width="formLabelWidth">
								<el-input type="textarea" :rows="3" v-model="infoform.username" autocomplete="off"
									style="width: 600px;"></el-input>
							</el-form-item>

						</el-form>
					</div>
				</div>

			</div>
			<div class="other-box-right">
				<div class="top-title">问诊项目/医生</div>
				<div class="search">
					<img class="search-img" src="../../../assets/images/fa-search.png" />
					<el-input class="search-input" v-model="input" placeholder="搜索科室名称..."></el-input>
					<div class="search-txt">搜索</div>
				</div>
				<div class="administrative-doctor">
					<div class="administrative-box">
						<div v-for="(item,index) in 10" class="administrative">
							<div style="display: flex;align-items: center;" class="active">
								<img class="check-on" src="../../../assets/images/check-on.png" />
								妇科病理
							</div>
							<img class="md-chevron_right" src="../../../assets/images/md-chevron_right.png" />
						</div>
					</div>
					<div class="doctor-box">
						<div class="doctor-list" v-for="(item,index) in 5">孙医生</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div v-if="step==2">
		<step></step>
	</div>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from "vue";
import Step from "../components/step.vue"
	const infoform = ref({
		username: "",
		username1: "",
		region: "",
	})
	const state = reactive({
		selectIndex: 0,
		formLabelWidth: '80px',
		value2: '',
		step: 2,
		tabindex:'1'
	})
const tabbtn = (val) => {
	state.tabindex = val
}
	const {
		selectIndex,
		formLabelWidth,
		value2,
		step,
		tabindex
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.detail-top-box {
		width: 100%;
		height: 79px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 0 20px;
		box-sizing: border-box;

		.left-box {
			display: flex;
			justify-content: flex-start;

			div {
				margin-left: 10px;
				width: 100px;
				height: 40px;
				line-height: 40px;
				color: rgb(123, 123, 123);
				cursor: pointer;
			}
		}

		.right-box
		 {
			width: 100px;
			height: 40px;
			line-height: 40px;
			border-radius: 5px;
			background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
			color: #fff;
			font-size: 14px;
			text-align: center;
			font-family: Roboto;
			border: 1px solid rgba(59, 182, 254, 1);
			cursor: pointer;
		}
		.left-box .active {
			width: 100px;
			height: 40px;
			line-height: 40px;
			border-radius: 5px;
			// background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(142,76,183,1) 85.87%);
			color: rgb(59, 182, 254);
			font-size: 14px;
			text-align: center;
			font-family: Roboto;
			border: 1px solid rgba(59, 182, 254, 1);
			cursor: pointer;
		}
	}

	.info-detail {
		background-color: #fff;
		margin: 20px 0;
	}

	.other-box {
		display: flex;
		justify-content: flex-start;
		margin: 20px 0;

		.other-box-left {
			width: 900px;
			// height: 300px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 1);
			margin-right: 10px;

			.info-box {
				display: flex;
				justify-content: flex-start;

				.info-box-left {
					width: 200px;

				}

				.other-box-right {
					flex: 1;
				}

			}
		}

		.other-box-right {
			// width: 49%;
			flex: 1;
			min-height: calc(100vh - 114px);
			// height: calc(100vh - 114px);
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 1);

			.search {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 95%;
				height: 43px;
				margin: 20px auto;
				line-height: 20px;
				border-radius: 30px 30px 30px 30px;
				border: 1px solid rgba(219, 219, 219, 1);

				.search-img {
					width: 20px;
					height: 20px;
					margin-left: 10px;
				}

				.search-txt {
					height: 43px;
					width: 67px;
					border-radius: 0px 30px 30px 30px;
					background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
					color: rgba(255, 255, 255, 1);
					font-size: 14px;
					line-height: 43px;
					text-align: center;
				}

				:deep(.el-input__wrapper) {
					background-color: #fff;
					border: none !important;
					outline: none;
					box-shadow: none;
				}
			}

			.administrative-doctor {
				display: flex;
				justify-content: flex-start;

				.administrative {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: rgb(16, 16, 16);
					font-size: 20px;
					margin-bottom: 20px;
					margin-left: 10px;
					width: 190px;

					.active {
						color: rgba(59, 182, 254, 1);
					}

					.check-on {
						width: 24px;
						height: 24px;
						margin-right: 10px;
					}

					.md-chevron_right {
						width: 24px;
						height: 24px;
						margin-right: 10px;
					}
				}

				.doctor-box {
					flex: 1;
					margin-left: 20px;

					.doctor-list {
						color: rgb(16, 16, 16);
						font-size: 20px;
						margin-bottom: 20px;
					}
				}
			}
		}
	}

	.top-title {
		color: rgb(16, 16, 16);
		font-size: 16px;
		font-weight: 600;
		padding-left: 10px;
		position: relative;
		// border-bottom:1px solid rgba(234,234,234,1);
		height: 50px;
		line-height: 50px;
		margin: 0 10px;

	}

	.top-title::after {
		content: "";
		display: block;
		height: 28px;
		width: 4px;
		border-radius: 10px;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
		position: absolute;
		left: 0;
		top: 12px;
		border-radius: 0px 10px 10px 0px;
	}
</style>